@startuml
  title Диаграмма отправки сообщений от компонентов расширения к контекстному скрипту
  left to right direction

  frame "Активная вкладка" {
    component [content_script.js] as content_script
    portin pin_av as "chrome.runtime.onMessage.addListener()"
  }

  frame "Компоненты расширения" {
    frame "Options Tab" as OPTIONS_FRAME {
      component [options.js] as options
    }
    frame "Popup Menu" as POPUP_FRAME {
      component [popup.js] as popup
    }
    frame "DevTools" as DEVTOOLS_FRAME {
      component [devtools.js] as devtools_script
      frame "DevTools" as DEVTOOLS_PANELS {
        component [panel.js] as panel_script
        component [panels_elements.js] as panels_elements_script
        component [panels_sources.js] as panels_sources_scrip
      }
    }
    component [background.js] as background
    portin pin_cr as " "
    portout pout_cr as "chrome.tabs.sendMessage()"
  }

  devtools_script --> pout_cr : 1
  panel_script --> pout_cr : 1
  panels_elements_script --> pout_cr : 1
  panels_sources_scrip --> pout_cr : 1
  background --> pout_cr : 1
  options --> pout_cr : 1
  popup --> pout_cr : 1
  pout_cr --> pin_av: 2 Отправка запроса

  pin_av --> content_script: 3 Получение запроса

  content_script --> pin_cr: 4 Отправка ответа
  pin_cr --> background: 5
  pin_cr --> options: 5
  pin_cr --> popup: 5
  pin_cr --> devtools_script: 5
  pin_cr --> panel_script: 5
  pin_cr --> panels_elements_script: 5
  pin_cr --> panels_sources_scrip: 5

@enduml